<template>
  <el-dialog
    title="工作日安排"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="40%"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    class="report-text-form"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <div class="dia-sub">
      <div>
        <span>{{weekData.year}}年</span>
        <span>{{weekData.month}}月</span>
        <span>{{weekData.day}}日</span>
        <span class="week">{{weekData.week}}</span>
        <span>{{baseData.factoryName}}</span>
        <span v-if='baseData.workshopName'>-{{baseData.workshopName}}</span>
        <span v-if='baseData.lineName'>-{{baseData.lineName}} </span>
      </div>
      <el-button v-if="!configDisabled" type="primary" size="mini" @click="handleConfig">设置</el-button>
    </div>

    <div class="workday">
      <template v-if='classesDutyList && classesDutyList.length'>
        <div v-for="(item,index) in classesDutyList" :key="item.id">
          <div v-if='item.produceStatus' class="team-status list">
            <span>{{item.workTime}}</span>
            <span size="mini" class="status"
             v-text='item.produceStatus == "ON" ? "班" : "休"'
             :class='item.produceStatus == "OFF" ? "off-work" : ""'
            >
            </span>
          </div>

          <template v-else>
            <el-collapse accordion v-model="activeTeam">
              <el-collapse-item :name="index" class="team">
                <template slot="title">
                  <div class="team-title">
                    <span class="team-name">{{item.workTime}}</span>
                    <span size="mini" class="status"
                     v-if='item.produceStatus'
                     v-text='item.produceStatus == "ON" ? "班" : "休"'
                     :class='item.produceStatus == "OFF" ? "off-work" : ""'
                    >
                    </span>
                  </div>
                </template>

                <template v-if='item.workshopDutyInfoList && item.workshopDutyInfoList.length'>
                  <div v-for="(ele,idx) in item.workshopDutyInfoList" :key="ele.workshopId">
                    <div v-if='ele.produceStatus' class='list workshop-pick'>
                      <span class='workshop-name'>{{ele.workshopName}}</span>
                      <span size="mini" class="status"
                       v-text='ele.produceStatus == "ON" ? "班" : "休"'
                       :class='ele.produceStatus == "OFF" ? "off-work" : ""'
                      >
                      </span>
                    </div>

                    <template v-else>
                      <el-collapse accordion v-model="activeWorkshop">
                        <el-collapse-item :name="idx" class='workshop'>
                          <template slot="title">
                            <div class='list workshop-list'>
                              <span class='workshop-name'>{{ele.workshopName}}</span>
                              <span size="mini" class="status"
                               v-if='ele.produceStatus'
                               v-text='ele.produceStatus == "ON" ? "班" : "休"'
                               :class='ele.produceStatus == "OFF" ? "off-work" : ""'
                              >
                              </span>
                            </div>
                          </template>

                          <template v-if='ele.lineDutyInfoList && ele.lineDutyInfoList.length'>
                            <div v-for="tar in ele.lineDutyInfoList" :key="tar.lineId" class='line'>
                              <div class='list line-list'>
                                <span>{{tar.lineName}}</span>
                                <span size="mini" class="status"
                                 v-if='tar.produceStatus'
                                 v-text='tar.produceStatus == "ON" ? "班" : "休"'
                                 :class='tar.produceStatus == "OFF" ? "off-work" : ""'
                                >
                                </span>
                              </div>
                            </div>
                          </template>
                        </el-collapse-item>
                      </el-collapse>
                    </template>
                  </div>
                </template>
              </el-collapse-item>
            </el-collapse>
          </template>
        </div>
      </template>

      <!-- 没有设置工作日 -->
      <template v-else>
        <div v-for="item in teamList" :key="item.id" class="team-onle list">
          <span>{{item.workTime}}</span>
          <span class="status" size="mini">班</span>
        </div>
      </template>
    </div>
  </el-dialog>
</template>
<script>
  import {listClasses} from "@/api/team/classes";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    weekData:{
      type: Object,
      default: ()=>{}
    },
    baseData:{
      type: Object,
      default: ()=>{}
    },
    weekdayItem:{
      type: Object,
      default: ()=>{}
    },
    configDisabled: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 100,
      },
      activeTeam:0,
      activeWorkshop:0,
      teamList:[],
      classesDutyList:[],
      saveloading: false
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val)
      },
      get() {
        return this.visible
      }
    }
  },
  methods: {
    handleClose() {
      this.saveloading = false
      this.resetFormData()
    },

    handleOpen() {
      this.resetFormData();
      this.classesDutyList = structuredClone(this.weekdayItem?.classesDutyList);
      if(!this.classesDutyList?.length){//没有设置工作日
        this.getList()
      }
      else{
        this.classesDutyList.forEach(item => {//获取班次
          if(item?.workshopDutyInfoList?.length){
            item.workshopDutyInfoList.forEach(ele => {//获取车间安排
              if(ele?.lineDutyInfoList?.length){//获取车间下面产线安排
                if(ele.lineDutyInfoList.every(this.isExistRest)){//所有产线都是工作日
                  this.$set(ele,"produceStatus","ON");
                }
                if(!ele.lineDutyInfoList.some(this.isExistRest)){//所有产线都是休息日
                  this.$set(ele,"produceStatus","OFF");
                }
              }
              else{//当前车间下的产线都是上班
                this.$set(ele,"produceStatus","ON");
              }
            })
            if(item.workshopDutyInfoList.every(this.isExistRest)){//所有车间都是工作日
              this.$set(item,"produceStatus","ON");
            }
            if(item.workshopDutyInfoList.every(this.isExisStatus) && !item.workshopDutyInfoList.some(this.isExistRest)){//所有s车间存在produceStatus，并且所有车间都是休息日
              this.$set(item,"produceStatus","OFF");
            }
          }
          else{//当前工厂下的产线都是上班
            this.$set(item,"produceStatus","ON");
          }
        })
        this.classesDutyList.forEach(ele => {
          this.$set(ele,"workTime",`${ele.classesName}(${ele.startTime}-${ele.endTime})`);
        })
      }
    },

    isExistRest(value, index, ar){
      if(value?.produceStatus){
        if(value?.produceStatus == "ON") {
          return true;
        }
        else {
          return false;
        }
      }
    },

    isExisStatus(value, index, ar){
      if(value?.produceStatus){
        return true;
      }
      else{
        return false;
      }
    },

    getList() {
      this.saveloading = true;
      this.single = null;
      const { pageNum, pageSize } = this.pager
      const params = {
        query:{
          searchValue: ""
        },
        pageNum,
        pageSize
      }
      listClasses(params)
      .then(response => {
        if (response.code == 200) {
          this.teamList = response.rows || [];
          if(this.teamList?.length){
            this.teamList.forEach(ele => {
              this.$set(ele,"workTime",`${ele.classesName}(${ele.startTime}-${ele.endTime})`);
            })
          }
        } else {
          this.teamList = []
        }
        this.saveloading = false;
      }).catch(() => {
        this.teamList = []
        this.saveloading = false;
      });
    },

    resetFormData() {
      this.$refs.ruleForm?.resetFields()
      this.classesDutyList = [];
      this.teamList = [];
      this.activeTeam = 0;
      this.activeWorkshop = 0;
    },

    handleConfig() {
      this.$emit("config-click")
    }
  }
};
</script>
<style lang="scss" scoped>
.report-text-form{
  .dia-sub{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:24px;
    font-size: 15px;
    font-weight: 600;
    color: #606266;
    .week{
      margin:0 8px
    }
  }
  .workday{
    color: #606266;
    font-size: 15px;
    .team{
      .team-title{
        margin-bottom: 10px;
        .team-name{
          font-size: 15px;
        }
      }
    }
    .team:not(:last-child){
      margin-bottom: 16px;
    }
    .team-onle:not(:last-child){
      margin-bottom: 16px;
    }
    .team-status{
      margin-bottom: 16px;
    }
    .list{
      display:flex;
      align-items: center;
      justify-content:space-between;
    }
    .workshop-pick{
      margin-bottom: 10px;
      margin-left:16px;
    }
    .workshop{
      margin-left:16px;
      margin-bottom: 10px;
      .workshop-list:not(:last-child){
        margin-bottom: 10px;
      }
    }
    .workshop-name{
      font-size: 15px;
    }
    .status {
      display: inline-block;
      vertical-align: middle;
      width: 36px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 6px;
      font-size: 14px;
      background: #88c446;
      color: #ffffff;
      &.off-work {
        background: #f56c6c;
      }
    }
    .line{
      margin-left:32px;
    }
    .line:not(:last-child){
      margin-bottom: 10px;
    }
    ::v-deep .el-collapse{
      border: none;
      .el-collapse-item__header{
        border: none;
      }
      .el-collapse-item__wrap{
        border: none;
        .el-collapse-item__content{
          padding:0
        }
      }
    }
  }
}

</style>
